<template>
	<view class="datapage">
		<view class="top">
			<image src="/static/image/banner-1-https://changban.dianjingkeji.net/img/banner-1-拷贝.jpg/banner-1-https://changban.dianjingkeji.net/img/banner-1-拷贝.jpg.jpg" mode=""></image>
			<view class="databox">
				<view class="boxtitle">
					当前阶段
				</view>
				<view class="line"></view>
				<view class="itemjieduan jieduanact">
					<view class="week">
						第2周
					</view>
					<view class="jieduan">
						2
					</view>
					<view class="jieduantitle">
						阶段
					</view>
					<view class="jiao"></view>
				</view>
			</view>
		</view>
		<!-- 周期 -->
		<view class="weekline">
			<view class="iconfont icon-xiangzuo"></view>
			<view class="week">
				08月01日-08月07日
			</view>
			<view class="iconfont icon-xiangyou2"></view>
		</view>
		<view class="calendarline">
			<view class="daybox">
				<view class="itemweek">
					日
				</view>
				<view class="itemday">
					3
				</view>
				<view class="iconfont icon-gaoxing">
					
				</view>
			</view>
			<view class="daybox">
				<view class="itemweek">
					一
				</view>
				<view class="itemday">
					4
				</view>
				<view class="iconfont icon-gaoxing"></view>
			</view>
			<view class="daybox">
				<view class="itemweek">
					二
				</view>
				<view class="itemday">
					5
				</view>
				<view class="iconfont icon-gaoxing"></view>
			</view>
			<view class="daybox act">
				<view class="itemweek">
					三
				</view>
				<view class="itemday">
					6
				</view>
				<view class="iconfont icon-gaoxing"></view>
			</view>
			<view class="daybox ">
				<view class="itemweek">
					四
				</view>
				<view class="itemday">
					7
				</view>
				<view class="iconfont icon-gaoxing"></view>
			</view>
			<view class="daybox">
				<view class="itemweek">
					五
				</view>
				<view class="itemday">
					8
				</view>
				<view class="iconfont icon-gaoxing"></view>
			</view>
			<view class="daybox">
				<view class="itemweek">
					六
				</view>
				<view class="itemday">
					9
				</view>
				<view class="iconfont icon-gaoxing"></view>
			</view>
		</view>
		<view class="chartbox">
			<view class="boxtitle">
				健康指数 <view class="addbtn">添加设备</view>
			</view>
			<view class="topbox">
				<view class="boxtitle">
					综合指数
				</view>
				<view class="chart1box" >
					<l-echart ref="chart1"></l-echart>
				</view>
				<view class="rightbanner">
					<view class="itembanner">
						<view class="name">
							75
						</view>
						<view class="label">
							6X综合
						</view>
					</view>
					<view class="itembanner">
						<view class="name">
							81
						</view>
						<view class="label">
							饮食
						</view>
					</view>
					<view class="itembanner">
						<view class="name">
							70
						</view>
						<view class="label">
							运动
						</view>
					</view>
				</view>
			</view>
			<view class="topbox">
				<view class="boxtitle">
					血压
				</view>
				<view class="chart1box">
					<l-echart ref="chart2"></l-echart>
				</view>
				<view class="rightbanner">
					<view class="itembanner">
						<view class="name">
							150/113
						</view>
						<view class="label">
							血压
						</view>
					</view>
				
					
				</view>
			</view>
			<view class="topbox">
				<view class="boxtitle">
					体重
				</view>
				<view class="chart1box">
					<l-echart ref="chart6"></l-echart>
				</view>
				<view class="rightbanner">
				
					<view class="itembanner">
						<view class="name">
							79
						</view>
						<view class="label">
							体重
						</view>
					</view>
					
				</view>
			</view>
			<view class="topbox">
				<view class="boxtitle">
					血糖
				</view>
				<view class="chart1box">
					<l-echart ref="chart3"></l-echart>
				</view>
				<view class="rightbanner">
					<view class="itembanner">
						<view class="name">
							7
						</view>
						<view class="label">
							空腹血糖
						</view>
					</view>
					<view class="itembanner">
						<view class="name">
							79
						</view>
						<view class="label">
						餐后2h
						</view>
					</view>
					<view class="itembanner">
						<view class="name">
							79
						</view>
						<view class="label">
						随机血糖
						</view>
					</view>
					<view class="itembanner">
						<view class="name">
							79
						</view>
						<view class="label">
						晚餐后2h
						</view>
					</view>
					
				</view>
			</view>
		</view>
		
		<view class="chartbox">
			<view class="boxtitle">
				睡眠监测
			</view>
			<view class="topbox">
				<view class="boxtitle">
					睡眠
				</view>
				<view class="chart1box" >
					<l-echart ref="chart4"></l-echart>
				</view>
				<view class="rightbanner">
					<view class="itembanner">
						<view class="name">
							30
						</view>
						<view class="label">
							呼吸
						</view>
					</view>
					<view class="itembanner">
						<view class="name">
							10
						</view>
						<view class="label">
						  冥想
						</view>
					</view>
				
				</view>
			</view>
		</view>
		
		<view class="chartbox">
			<view class="boxtitle">
				压力走势
			</view>
			<view class="topbox">
				<view class="boxtitle">
					压力
				</view>
				<view class="chart1box" >
					<l-echart ref="chart5"></l-echart>
				</view>
				<view class="rightbanner">
					<view class="itembanner">
						<view class="name">
							7
						</view>
						<view class="label">
							音乐
						</view>
					</view>
					<view class="itembanner">
						<view class="name">
							10
						</view>
						<view class="label">
						  瑜伽
						</view>
					</view>
				
				</view>
			</view>
		</view>
		<view class="goodlistbox">
			<view class="goodboxtitle">
				还没有数据？绑定智能设备
			</view>
			<view class="goodlist">
				<view class="itemgood">
					<view class="leftimgbox">
						<image src="https://changban.dianjingkeji.net/img/微信图片_20250930101522_881_133.png" mode=""></image>
					</view>
					<view class="goodrightbox">
						<view class="goodname">
								智能体脂秤
						</view>
						<view class="goodtitle">
							专家团队365天陪伴
						</view>
						<view class="labelbox">
							<view class="itemlabel">
								6x团队
							</view>
							<view class="itemlabel">
								专家组 线上指导
							</view>
						</view>
						<view class="btnline">
							<view class="pricebox">
								<view class="danwei">
									￥
								</view>
								<view class="price">
									356
								</view>
							</view>
							<view class="goodbtn">
								一键购买
							</view>
						</view>
					</view>
					
				</view>
				<view class="itemgood">
					<view class="leftimgbox">
						<image src="https://changban.dianjingkeji.net/img/微信图片_20250930101522_881_133.png" mode=""></image>
					</view>
					<view class="goodrightbox">
						<view class="goodname">
								智能体脂秤
						</view>
						<view class="goodtitle">
							专家团队365天陪伴
						</view>
						<view class="labelbox">
							<view class="itemlabel">
								6x团队
							</view>
							<view class="itemlabel">
								专家组 线上指导
							</view>
						</view>
						<view class="btnline">
							<view class="pricebox">
								<view class="danwei">
									￥
								</view>
								<view class="price">
									356
								</view>
							</view>
							<view class="goodbtn">
								一键购买
							</view>
						</view>
					</view>
					
				</view>
			</view>
			<view class="look">
				查看更多
				<view class="iconfont icon-xiangxia2 ">
					
				</view>
			</view>
			
		</view>
		
		
		
	
	</view>
</template>

<script>
	 import lEchart from '../../pagesO/components/lime-echart/components/l-echart/l-echart.vue'
	export default {
		data() {
			return {
				chart1:null,
				oneoption :{
			
				   tooltip: {
				      trigger: 'axis'
				   },
				   legend: {
				      type: 'scroll',
				      
				   },
				   grid: {
				      left: '3%',
				      right: '4%',
				       bottom: '3%',
				      containLabel: true
				   },
			
				   xAxis: {
				      type: 'category',
				      boundaryGap: false,
				      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				   },
				   yAxis: {
				      type: 'value'
				   },
				  
				   series: [
				      {
				         name: '饮食健康指数',
				         type: 'line',
				         stack: 'Total',
				         data: [120, 132, 101, 134, 90, 230, 210]
				      },
				      {
				         name: '运动健康指数',
				         type: 'line',
				         stack: 'Total',
				         data: [220, 182, 191, 234, 290, 330, 310]
				      },
				      {
				         name: '6x综合指数',
				         type: 'line',
				         stack: 'Total',
				         data: [150, 232, 201, 154, 190, 330, 410]
				      }
				   ]
				}

			}
		},
		components:{
		lEchart	
		},
		mounted() {
			
			 console.log(this)
			//  this.$nextTick(() => {
			//    this.chart1=this.$refs.chartone
			//    console.log(this.chart1)
			//  this.initchart1()	
			//   })
			this.initChart1()
			this.initChart2()
			this.initChart3()
			this.initChart4()
			this.initChart5()
			this.initChart6()
			
			
			
		},
		methods: {
			
			initChart1() {
					let option = {
						color: ['#5470C6', '#91CC75', '#EE6666', '#FAC858', '#73C0DE'],
				
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'cross',
								label: {
									backgroundColor: '#283b56'
								}
							}
						},
						legend: {
							top:0
						},
						grid: {
							bottom: 10,
							left: 0,
							right: 20,
							containLabel: true
						},
						xAxis: [{
							type: 'category',
							data: [1,2,3,4,5,6,7],
							axisLine: {
								lineStyle: {
									color: '#999999'
								}
							},
							axisLabel: {
								color: '#666666'
							}
						}],
						yAxis: [{
							type: 'value',
							// 格式化标签，只显示整数
							axisLabel: {
								color: '#666666',
								formatter: function(value) {
									
									return Math.round(value);
								}
							}
						}],
						
						series:[
							 {
							    type: 'line',
							    data: [10,11,12,13,14,15,16]
							  }
						]
						
					}
			     
					this.$nextTick(() => {
						this.$refs.chart1.init(this.$echarts, chart1 => {
							chart1.setOption(option);
						});
					})
					},
					initChart2() {
							let option = {
							color: ['#5470C6', '#91CC75', '#EE6666', '#FAC858', '#73C0DE'],
						
								tooltip: {
									trigger: 'axis',
									axisPointer: {
										type: 'cross',
										label: {
											backgroundColor: '#283b56'
										}
									}
								},
								legend: {
									top:0
								},
								grid: {
									bottom: 10,
									left: 0,
									right: 20,
									containLabel: true
								},
								xAxis: [{
									type: 'category',
									data: [1,2,3,4,5,6,7],
									axisLine: {
										lineStyle: {
											color: '#999999'
										}
									},
									axisLabel: {
										color: '#666666'
									}
								}],
								yAxis: [{
									type: 'value',
									// 格式化标签，只显示整数
									axisLabel: {
										color: '#666666',
										formatter: function(value) {
											
											return Math.round(value);
										}
									}
								},
								{
									type: 'value',
									name:'kg',
									// 格式化标签，只显示整数
									axisLabel: {
										color: '#666666',
										formatter: function(value) {
											
											return Math.round(value);
										}
									}
								}],
							series:[
								 {
								    type: 'line',
								    data: [10,11,12,13,14,15,16]
								  }
							]
							}
					     
							this.$nextTick(() => {
								this.$refs.chart2.init(this.$echarts, chart2 => {
									chart2.setOption(option);
								});
							})
							},
							initChart3() {
									let option = {
									color: ['#5470C6', '#91CC75', '#EE6666', '#FAC858', '#73C0DE','#A020F0','#802A2A','#00FF00'],
								
										tooltip: {
											trigger: 'axis',
											axisPointer: {
												type: 'cross',
												label: {
													backgroundColor: '#283b56'
												}
											}
										},
										legend: {
											top:0
										},
										grid: {
											bottom: 10,
											left: 0,
											right: 20,
											containLabel: true
										},
										xAxis: [{
											type: 'category',
											data: [1,2,3,4,5,6,7],
											axisLine: {
												lineStyle: {
													color: '#999999'
												}
											},
											axisLabel: {
												color: '#666666'
											}
										}],
										yAxis: [{
											type: 'value',
											// 格式化标签，只显示整数
											axisLabel: {
												color: '#666666',
												formatter: function(value) {
													
													return Math.round(value);
												}
											}
										}],
										series:[
											 {
											    type: 'line',
											    data: [10,11,12,13,14,15,16]
											  }
										]
									}
							     
									this.$nextTick(() => {
										this.$refs.chart3.init(this.$echarts, chart3 => {
											chart3.setOption(option);
										});
									})
									},
									initChart4() {
											let option = {
												color: ['#5470C6', '#91CC75', '#EE6666', '#FAC858', '#73C0DE'],
										
												tooltip: {
													trigger: 'axis',
													axisPointer: {
														type: 'cross',
														label: {
															backgroundColor: '#283b56'
														}
													}
												},
												legend: {
													top:0
												},
												grid: {
													bottom: 10,
													left: 0,
													right: 20,
													containLabel: true
												},
												xAxis: [{
													type: 'category',
													data: [1,2,3,4,5,6,7],
													axisLine: {
														lineStyle: {
															color: '#999999'
														}
													},
													axisLabel: {
														color: '#666666'
													}
												}],
												yAxis: [{
													type: 'value',
													// 格式化标签，只显示整数
													axisLabel: {
														color: '#666666',
														formatter: function(value) {
															
															return Math.round(value);
														}
													}
												}],
												
												series:[
													 {
													    type: 'bar',
													    data: [10,11,12,13,14,15,16]
													  }
												]
												
											}
									     
											this.$nextTick(() => {
												this.$refs.chart4.init(this.$echarts, chart4 => {
													chart4.setOption(option);
												});
											})
											},
											initChart5() {
													let option = {
														color: ['#5470C6', '#91CC75', '#EE6666', '#FAC858', '#73C0DE'],
												
														tooltip: {
															trigger: 'axis',
															axisPointer: {
																type: 'cross',
																label: {
																	backgroundColor: '#283b56'
																}
															}
														},
														legend: {
															top:0
														},
														grid: {
															bottom: 10,
															left: 0,
															right: 20,
															containLabel: true
														},
														xAxis: [{
															type: 'category',
															data: [1,2,3,4,5,6,7],
															axisLine: {
																lineStyle: {
																	color: '#999999'
																}
															},
															axisLabel: {
																color: '#666666'
															}
														}],
														yAxis: [{
															type: 'value',
															// 格式化标签，只显示整数
															axisLabel: {
																color: '#666666',
																formatter: function(value) {
																	
																	return Math.round(value);
																}
															}
														}],
														
														series:[
															 {
															    type: 'line',
																smooth:'true',
															    data: [10,11,12,13,14,15,16]
															  }
														]
														
													}
											     
													this.$nextTick(() => {
														this.$refs.chart5.init(this.$echarts, chart5 => {
															chart5.setOption(option);
														});
													})
													},
													
													initChart6() {
															let option = {
																color: ['#5470C6', '#91CC75', '#EE6666', '#FAC858', '#73C0DE'],
														
																tooltip: {
																	trigger: 'axis',
																	axisPointer: {
																		type: 'cross',
																		label: {
																			backgroundColor: '#283b56'
																		}
																	}
																},
																legend: {
																	top:0
																},
																grid: {
																	bottom: 10,
																	left: 0,
																	right: 20,
																	containLabel: true
																},
																xAxis: [{
																	type: 'category',
																	data: [1,2,3,4,5,6,7],
																	axisLine: {
																		lineStyle: {
																			color: '#999999'
																		}
																	},
																	axisLabel: {
																		color: '#666666'
																	}
																}],
																yAxis: [{
																	type: 'value',
																	// 格式化标签，只显示整数
																	axisLabel: {
																		color: '#666666',
																		formatter: function(value) {
																			
																			return Math.round(value);
																		}
																	}
																}],
																
																series:[
																	 {
																	    type: 'line',
																	    data: [10,11,12,13,14,15,16]
																	  }
																]
																
															}
													     
															this.$nextTick(() => {
																this.$refs.chart6.init(this.$echarts, chart6 => {
																	chart6.setOption(option);
																});
															})
															},
									
									
		}
	}
</script>

<style lang="less" scoped>
	.datapage{
		width: 750rpx;
		box-sizing: border-box;
		padding-bottom: 250rpx;
		background-color: whitesmoke;
		.top{
			width: 100%;
			height: 350rpx;
			box-sizing: border-box;
			padding: 20rpx;
			border-radius: 20rpx;
			position: relative;
			image{
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
			.databox{
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				bottom: 0;
				color: white;
				box-sizing: border-box;
				padding-left: 40rpx;
				padding-top: 60rpx;
				.boxtitle{
					font-size: 40rpx;
				}
				.line{
					width: 80rpx;
					height: 4rpx;
					background-color: white;
					margin-top: 10rpx;
				}
				.itemjieduan{
					width: 150rpx;
					min-width: 150rpx;
					margin: 30rpx ;
					height: 150rpx;
					border-radius: 20rpx;
					box-sizing: border-box;
					position: relative;
					padding-top: 50rpx;
					padding-left: 20rpx;
					 box-shadow: 
					    5px 0 10px -5px rgba(0,0,0,0.2),  /* 左侧阴影 */
					    -5px 0 10px -5px rgba(0,0,0,0.2), /* 右侧阴影 */
					    0 5px 10px -5px rgba(0,0,0,0.2);  /* 底部阴影 */
					.week{
						width: 100rpx;
						height: 36rpx;
						position: absolute;
						color: #E6E6E6 ;
						font-size: 26rpx;
						text-align: center;
						line-height: 36rpx;
						font-weight: bold;
						right: 0;
						top: 0;
						border-top-right-radius: 20rpx;
						border-bottom-left-radius: 20rpx;
					}
					.jieduan{
						font-weight: bold;
				         font-size: 40rpx;
						 color: #858585;			 
					}
					.jieduantitle{
						 color: #858585;	
						 font-weight: bold;
					}
				}
				.jieduanact{
					background: linear-gradient(180deg, rgba(255,255,255,1) 0%,#1a4f8a 100%);
					.week{
						background-color: rgba(255,255,255,0.27);
						color: white;
					}
					.jieduan{
						color: white;
					}
					.jieduantitle{
						color: white;
					}
					.jiao{
						position: absolute;
						width: 24rpx;
						height: 24rpx;
						background-color: #DECFFF ;
						bottom: -10rpx;
						z-index: -1;
						left: 65rpx;
						rotate: 45deg;
					}
				}
			}
		}
		.weekline{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 40rpx 0;
			background-color: white;
			.week{
				margin: 0 30rpx;
				font-weight: bold;
				color: #1A4F8A;
				font-size: 32rpx;
				font-family: OPPOSans-black;
			}
			.iconfont{
				color: #EDCFFF;
			}
		}
		.calendarline{
			width: 100%;
			box-sizing: border-box;
			background: white;
			padding: 0 10rpx 30rpx 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			text-align: center;
			.daybox{
				line-height: 2.5;
				width: 14.28%;
				box-sizing: border-box;
				.itemweek{
					color: #999999 ;
					font-weight: bold;
				}
				.itemday{
					font-weight: bold;
					color: black;
					width: 66rpx;
					height: 66rpx;
					line-height: 70rpx;
					border-radius: 30rpx;
					text-align: center;
					margin: auto;
					box-sizing: border-box;
					
				}
				.iconfont{
					font-size: 44rpx;
					color: #1a4f8a;
					text-align: center;
				}
			}
			.act{
				background-color: #F2ECFF;
				border-radius: 30rpx;
				.itemweek{
					color: black;
				}
				.itemday{
					background-color: #1A4F8A;
					color: white;
				}
				.iconfont{
					color:#1A4F8A;
				}
				
				
			}
			
		}
		.chartbox{
			width: 100%;
			box-sizing: border-box;
			background-color: white;
			margin-top: 20rpx;
			padding: 20rpx 20rpx 40rpx 0;
			.boxtitle{
				font-size: 30rpx;
				font-weight: bold;
				border-left: 8rpx solid #1A4F8A;
				height: 30rpx;
				padding-left: 30rpx;
				line-height: 30rpx;
				display: flex;
				align-items: center;
				
				.addbtn{
					  width: 150rpx;
					  height: 50rpx;
					  background-color: #1A4F8A;
					  color: white;
					  font-size: 28rpx;
					  font-weight: bold;
					  text-align: center;
					  line-height: 50rpx;
					  border-radius: 10rpx;
					  margin-left: 20rpx;
				}
			}
			.topbox{
				width: 100%;
				
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding-left: 10rpx;
				margin-top: 30rpx;
				position: relative;
				.boxtitle{
					font-size: 30rpx;
					position: absolute;
					font-weight: bold;
					left: 20rpx;
					top: 0;
				}
				.chart1box{
					width: 600rpx;
					height: 400rpx;
					
					
				}
				.rightbanner{
					.itembanner{
						width: 120rpx;
						height: 120rpx;
						border-radius: 20rpx;
						background-color: #1A4F8A;
						color: white;
						text-align: center;
						box-sizing: border-box;
						padding-top: 20rpx;
						margin-top: 10rpx;
						.name{
							font-weight: bold;
							font-size: 34rpx;
						}
						.label{
							font-size: 26rpx;
							color: rgba(255,255,255,0.7);
							
						}
					}
					
				}
			}
		}
		
		.goodlistbox{
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx;
			margin-top: 30rpx;
			.goodboxtitle{
				color: #656565 ;
				margin-bottom: 30rpx;
			}
			.goodlist{
				width: 100%;
				box-sizing: border-box;
				.itemgood{
					height: 300rpx;
					display: flex;
					align-items: center;
					margin-top: 30rpx;
					
					.leftimgbox{
						width: 260rpx;
						height: 300rpx;
						border-radius: 20rpx;
						margin-right: 30rpx;
						image{
							width: 100%;
							height: 100%;
							border-radius: 20rpx;
						}
					}
					.goodrightbox{
						line-height: 2.5;
						.goodname{
							font-weight: bold;
						}
						.goodtitle{
							color: #8D8D8D ;
						}
						.labelbox{
							display: flex;
							font-size: 24rpx;
							color: #AA7A00 ;
							.itemlabel{
								padding: 0rpx 10rpx;
								background-color: #FFF4D8 ;
								border-radius: 8rpx;
								margin-right: 10rpx;
							}
						}
						.btnline{
							display: flex;
							align-items: center;
							justify-content: space-between;
							.pricebox{
								display: flex;
								align-items: center;
								color: #FF1F00 ;
								.danwei{
									font-size: 26rpx;
								}
								.price{
									font-weight: bold;
								}
							}
							.goodbtn{
								width: 130rpx;
								height: 40rpx;
								line-height: 40rpx;
								text-align: center;
								color: #FF1F00 ;
								border: 1rpx solid #FF1F00;
								border-radius: 10rpx;
								font-size: 28rpx;
							}
						}
					}
				}
				
			}
			.look{
				width: 100%;
				text-align: center;
				justify-content: center;
				display: flex;
				align-items: center;
				color: #656565 ;
				margin-top: 30rpx;
			}
			
		}
		
		
		
		
		
		
		
		
		
		
	}

</style>
